<template>
  <div>
    <head-top
      routerName="no"
      @to-router="clickRouter"
      title="收货地址管理"
      address
      @to-addressModal="addressModal({ address: 'address' })"
    ></head-top>
    <div class="content-wrap">
      <div class="list-wrap">
        <van-loading v-if="loading" />
        <ul v-else :class="goods ? 'radio' : ''">
          <li
            v-for="(item, index) in AddressList"
            :key="index"
            :class="item.is_default == '0' ? 'default' : ''"
            @click="goodsGetAddress(item)"
          >
            <van-radio
              v-if="goods"
              :name="item.AddressId"
              v-model="radio"
            ></van-radio>
            <div class="list">
              <div class="content">
                <div class="head">
                  <div class="name">{{ item.userName }}</div>
                  <div class="phone">{{ item.mobile }}</div>
                  <div class="status">
                    <span v-if="item.is_default == '0'">默认</span>
                    <span v-else @click.stop="addressDefault(item.AddressId)"
                      >设为默认地址</span
                    >
                  </div>
                </div>
                <div class="address">
                  {{ item.province }}{{ item.city }}{{ item.district }}{{ item.address }}
                </div>
              </div>
              <div @click.stop="addressModal(item)">
                <svg-icon icon-class="edit" class-name="edit" />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <address-modal
      ref="modal"
      @load="getData"
      :pageNumber.sync="pageNumber"
      @upPageNumber="upPageNumber"
    ></address-modal>
  </div>
</template>
<script>
import HeadTop from "@/components/head";
import { getAddress, updateAddress } from "@/api/address";
import "@/icons";
import { Toast, Loading, Radio } from "vant";
export default {
  //--------goods引入该组件---------
  props: {
    goods: {
      type: Boolean,
    },
    //goods页面 pageNumber：0返回上一页，1关闭地址弹出，2关闭编辑和添加
    pageNumber: {
      type: Number,
      default: null,
    },
  },
  //-------------
  components: {
    HeadTop,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
    [Radio.name]: Radio,
    addressModal: (resolve) => require(["./addressModal"], resolve),
  },
  data() {
    return {
      backStatu: false,
      AddressList: [],
      loading: true,
      radio: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      getAddress({}).then((res) => {
        this.loading = false;
        this.AddressList = res.data.resultData;
      });
    },
    addressModal(query) {
      this.$refs.modal.show(query);
      if (!this.pageNumber) {
        this.$router.push({
          name: "address",
          query,
        });
      } else {
        this.upPageNumber(2);
      }
    },
    upPageNumber(pageNumber) {
      if (this.pageNumber) {
        this.$emit("update:pageNumber", pageNumber);
      } else {
        this.$onBackPressed()
      }
    },
    addressModalhide() {
      this.$refs.modal.hide();
    },
    addressDefault(AddressId) {
      //先把默认地址去掉，再设置默认地址  0：默认
      const data = {
      };
      //判断是否有默认地址
      var defaultAdd = this.AddressList.find((item) => item.is_default == "0");
      if (defaultAdd) {
        data.isDefault = "1";
        data.addressId = defaultAdd.AddressId;
      } else {
        data.isDefault = "0";
        data.addressId = AddressId;
      }
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中...",
      });
      updateAddress(data).then((res) => {
        if (res.data.resultStatus) {
          if (defaultAdd) {
            //第一步没有默认地址不需要再次请求
            data.isDefault = "0";
            data.addressId = AddressId;
            updateAddress(data).then((_res) => {
              if (_res.data.resultStatus) {
                Toast.success(res.data.errorMessage);
                this.getData();
              } else {
                Toast.fail(res.data.errorMessage);
              }
              const timer = setInterval(() => {
                clearInterval(timer);
                Toast.clear();
              }, 1000);
            });
          } else {
            Toast.success(res.data.errorMessage);
            this.getData();
            const timer = setInterval(() => {
              clearInterval(timer);
              Toast.clear();
            }, 1000);
          }
        } else {
          Toast.fail(res.data.errorMessage);
        }
      });
    },
    clickRouter() {
      if (this.goods) {
        this.$emit("goods-address");
      } else {
        this.$onBackPressed();
      }
    },
    goodsGetAddress(item) {
      if (this.goods) {
        this.radio = item.AddressId;
        this.$emit("goods-address", item);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .list-wrap {
    ul {
      li {
        margin-bottom: 13px;
        position: relative;
        &.default {
          &:after {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 2px;
            background: repeating-linear-gradient(
              -45deg,
              #ff6c6c 0,
              #ff6c6c 20%,
              transparent 0,
              transparent 25%,
              #1989fa 0,
              #1989fa 45%,
              transparent 0,
              transparent 50%
            );
            background-size: 80px;
            content: "";
          }
          .list {
            .content {
              .head {
                color: #fe4b08;
              }
            }
          }
        }
        .list {
          padding: 22px 12px;
          background: #ffffff;
          box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
          border-radius: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .content {
            width: 210px;
            .head {
              display: flex;
              align-items: center;
              height: 20px;
              font-size: 14px;
              font-weight: 500;
              color: #333333;
              line-height: 20px;
              .phone {
                padding: 0 5px 0 10px;
              }
              .name{
                // flex: 70px 0 0;
              }

              .status {
                // flex: 90px 0 0;
                height: 16px;
                font-size: 11px;
                font-weight: 400;
                line-height: 16px;
              }
            }
            .address {
              margin-top: 10px;
              font-size: 12px; 
              font-weight: 400;
              color: #333333;
              line-height: 17px;
            }
          }
          .edit {
            position: relative;
            z-index: 11;
            padding: 20px 4px;
            width: 14px;
            height: 14px;
            box-sizing: content-box;
          }
        }
      }
      &.radio {
        li {
          .list {
            padding-left: 60px;
          }
          .van-radio {
            position: absolute;
            top: 50%;
            left: 20px;
            margin-top: -10px;
          }
        }
      }
    }
  }
}
</style>